<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>
// 浏览器的同源策略，限制ajax跨域请求数据
// 1.前端和后端部署在不同的服务器
// 2.项目中需要使用别人提供的数据
// 同源，是指 协议、域名/IP地址、端口号 三者均为相同
// 跨域，是指 协议、域名/IP地址、端口号 三者任意一个不相同

// 跨域解决方案：
// 1.服务端代理请求
// 2.CORS跨域资源共享
// 3.nginx代理转发
// 4.jsonp跨域
// jsonp原理：
    // 1.利用script标签的跨域能力请求数据
    // 2.script标签加载回来的数据浏览器当成JS解析
// jsonp实现：
    // 1.创建script标签
    // 2.将数据接口赋值给script标签的src属性（查询字符串和callback）
    // 3.将script标签添加到页面中
    // 4.数据加载完成后删除script标签
    // 注意:callback函数必须是在全局作用域中

// fetch
// fetch是ajax的替代品
// fetch不是对ajax的进一步封装
// fetch基于Pormise设计,fetch执行后返回promise对象

// fetch('接口地址')// 默认为get请求
// .then(res=>res.json())
// .then((data)=>{
//     console.log( data )
// })

// fetch('接口地址',{// 配置对象
//     method: 'post',
//     headers: {
//         // 'Content-Type': 'application/json',
//         'Content-Type': 'application/x-www-form-urlencoded',
//     },
//     // body: JSON.stringify({})
//     body: 'abc=123&www=456'
// })
// .then(res=>res.json())
// .then((data)=>{
//     console.log( data )
// })

</script>
</body>
</html>